<template>
	<div class="container">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
			<el-breadcrumb-item><b>'酒店设施'</b></el-breadcrumb-item>
		</el-breadcrumb>

		<el-form :inline="true" :model="ff" class="demo-form-inline" style="margin-top: 15px;">
			<el-form-item label="名称">
				<el-input v-model="ff.name" placeholder="请输入名称"></el-input>
			</el-form-item>
			<el-form-item label="类型">
				<el-input v-model="ff.type" placeholder="请输入类型"></el-input>
			</el-form-item>
			<el-form-item>


				<el-button type="primary" icon="el-icon-search" @click="handleList">查询</el-button>
				<!-- <el-button type="danger" icon="el-icon-delete" @click="plsc">批量删除</el-button> -->
				<el-button @click="deleteFileOrDirectory(sels)" :disabled="this.sels.length === 0"> 批量删除</el-button>
				<el-button type="success" icon="el-icon-plus" @click="handadd()">新增</el-button>
				<el-button :plain="true" type="info" icon="el-icon-help" @click="help()">帮助</el-button>
			</el-form-item>

		</el-form>





		<!-- 数据表格 -->
		<el-table :data="tableData" style="width: 100%;margin-top: -10px;" @selection-change="selsChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column label="#" type="index" width="60"></el-table-column>

			<!-- 	<el-table-column prop="id" label="id" :width="colwidth">
			</el-table-column> -->
			<el-table-column prop="name" label="名称" >
			</el-table-column>
			<el-table-column prop="type" label="类型" :formatter="formattertype" align="center">
			</el-table-column>
			<!-- <el-table-column prop="type" label="类型" width="80px":width="colwidth">
				<template slot-scope="scope">
					<span v-if="scope.row.type === '1'">酒店</span>
					<span v-if="scope.row.type === '2'">房间</span>
				</template>
			</el-table-column> -->
			<!-- <el-table-column prop="CreateTime" align="center" label="创建日期" :width="colwidth" :formatter="fmt">
						</el-table-column> -->
			<el-table-column prop="icon" label="图标" align="center">
			</el-table-column>


			<el-table-column label="操作" width="300px" align="center">
				<template slot-scope="scope">
					<el-button size="mini" type="infor" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>


		<!-- 分页栏 -->
		<el-pagination style="margin-top: 10px;" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
		 :current-page="ff.page" :page-sizes="[10, 20, 30, 40]" :page-size="ff.rows" layout="total, sizes, prev, pager, next, jumper"
		 :total="ff.total">
		</el-pagination>

		<!--页面对话框-->
<!-- 		<el-dialog @close="handledialogMergeFormClosed" :title="dialogTitle" :visible.sync="dialogMergeForm">
			<el-form :model="mergeForm" :rules="rules" ref="mergeForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="id" prop="id">
					<el-input v-model="mergeForm.id"></el-input>
				</el-form-item>
				<el-form-item label="=名称" prop="name">
					<el-input v-model="mergeForm.name"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<el-input type="textarea" v-model="mergeForm.type"></el-input>
				</el-form-item>
				<el-form-item label="图标" prop="icon">
					<el-input type="textarea" v-model="mergeForm.icon"></el-input>
				</el-form-item> -->

				<!-- <el-form-item label="创建日期时间" prop="chcCreateDate">
					<el-input type="textarea" v-model="mergeForm.chcCreateDate"></el-input>
				</el-form-item> -->
				<!-- 				<el-form-item label="创建时间" required style="width: 500px;">
					<el-col :span="11" style="width: 300px;">
						<el-form-item prop="chcCreateDate">
							<el-date-picker type="date" placeholder="选择日期" v-model="mergeForm.chcCreateDate"  style="width: 100%;" readonly="readonly"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogMergeForm = false">取 消</el-button>
				<el-button type="primary" @click="handleMerge">确 定</el-button>
			</div>
		</el-dialog> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogTitle: '酒店设施',
				tableData: [],
				sels: [],
				dialogMergeForm: false,
				ff: {
					name: null,
					type: null,
					icon: null,
					page: 1,
					rows: 5,
					total: -1
				},
				mergeForm: {
					name: null,
					type: null,
					icon: null,
					// CreateTime: new Date().getTime(),
				},
				rules: {
					id: [],
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择类型',
						trigger: 'blur'
					}],
					icon: [{
						required: true,
						message: '请输入图标',
						trigger: 'blur'
					}]

				}
			}
		},
		created() {
			this.doList()
		},
		methods: {
			fmt: function(row, column) {
				const date = new Date(row[column.property])
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = date.getDate() + ' '
				var h = date.getHours() + ':'
				var m = date.getMinutes() + ':'
				var s = date.getSeconds()
				return Y + M + D + h + m + s
			},
			doList: function() {
				this.axios.post(this.axios.urls.SYS_SA_LIST, this.ff).then((response) => {

					// console.log(response);

					this.tableData = response.data.result;
					this.ff.page = response.data.page
					this.ff.rows = response.data.rows
					this.ff.total = response.data.total


					// this.doList()
				});
			},
			selsChange(sels) {
				this.sels = sels
			},
			handleList: function() {
				this.doList()
			},
			handleSizeChange(rows) {
				console.log('rows=%s', rows);
				this.ff.page = 1
				this.ff.rows = rows
				this.doList()
			},
			handleCurrentChange(page) {
				this.ff.page = page
				this.doList()
			},
			help() {
				this.$message('系统正在维护，请拨打10086阐述您的问题');
			},
			formattertype: function(row, column) {
				return row.type == '1' ? '酒店' : row.type == '2' ? '房间' : '未知'
			},


			handleDelete: function(index, row) {
				console.log('row.id',row.id)
				this.$confirm('您确定要删除此记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.post(this.axios.urls.SYS_SA_SS, {
						'id': row.id
					}).then((response) => {
						this.$message({
							message: '删除成功',
							type: 'success'
						})
						this.doList()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				});

			},
			deleteFileOrDirectory() {
				var ids = this.sels.map(item => item.id).join() //获取所有选中行的id组成的字符串，以逗号分隔
				console.log('ids', ids)
				this.$confirm('您确定要删除此记录，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.post(this.axios.urls.SYS_SA_DEL, {
						'ids': ids
					}).then((response) => {
						this.$message({
							message: '删除成功',
							type: 'success'
						})
						this.doList()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
				// }

			},
			handleEdit: function(chc) {
				console.log('Edit')
				this.$store.commit('setid', {
					'id': chc,
				});
				this.$message({
					message: '恭喜你，这是一条成功消息',
					type: 'success'
				});
				this.$router.push('/ThotelFacilityEdit');
			},
			handadd: function() {
				console.log('添加酒店设施')
				this.$router.push('/ThotelFacilityAdd');
			}

		},
	}
</script>

<style scoped="scoped">
	.container {
		margin: 15px;
	}

	.el-input__inner {
		width: 100px;
	}

	.el-input {
		width: 100px;
	}
</style>
